<template>
  <!-- 右侧 -->
  <div class="material_right ml_30">
    <div class="mlr_40 mt_30">
      <!-- title -->
      <div class="dis_f pb_29 bor_bottom">
        <div class="actives ml_7"></div>
        <div class="color_333 font_18">我的题库</div>
      </div>
      <div class="dis_f mt_20">
        <el-button plain class="questionbtn font_14">已做题库（3）</el-button>
        <el-button plain class="questionbtn font_14 ml_20">已做题库（3）</el-button>
      </div>
      <div>
        <div class="font_18 color_333 mt_30">
          <div>消防工程师</div>
          <div class="questionimg mt_20">
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
          </div> 
        </div>
        <div class="font_18 color_333 mt_38">
          <div>二级建造师-水利水电工程管理</div>
          <div class="questionimg mt_20">
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
          </div> 
        </div>
        <div class="font_18 color_333 mt_38">
          <div>2020一级注册消防工程师</div>
          <div class="questionimg mt_20">
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
            <img src="../../static/image/ques34@2x.png" width="104" height="125" />
          </div> 
        </div>
      </div>
    </div>
    <div>
   
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Element from "element-ui";

export default {
  data() {
    return {};
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {},
    beforeRemove(file, fileList) {}
  }
};
</script>

<style scoped lang='less'>
.mt_20{
  margin-top: 20px;
}
.questionimg img {
  margin-right: 34px;
}
.questionimg img:nth-last-child(1) {
  margin-right: 0;
}
.mt_38 {
margin-top: 38px;
}
.mt_20 {
  margin-top: 20px;
}
.ml_20 {
  margin-left: 20px;
}
.font_14 {
  font-size: 14px;
}
.questionbtn {
  width: 121px;
  height: 34px;
  line-height: 10px;
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.mt_30 {
  margin-top: 30px;
}
.material_right {
  width: 957px;
height:895px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.ml_7 {
  margin-right: 7px;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
</style>